<template>
	<div class="mainsu">
		<div class="main_spac1">
			<div class="main_white padding10 paddingBottom20">
				<div class="mainor_form">
					<div class="mainor_te">
						<el-button type="primary" @click="handleSynchronAll"
							>批量同步</el-button
						>
					</div>
					<el-form
						:inline="true"
						:model="form"
						class="demo-form-inline"
						ref="userListFrom"
						label-width="70px"
					>
						<el-form-item label="是否同步" prop="is_synchro">
							<el-select
								v-model.trim="form.is_synchro"
								placeholder="是否同步"
								class="wid220"
							>
								<el-option label="所有" :value="parseInt(0)"></el-option>
								<el-option label="是" :value="parseInt(2)"></el-option>
								<el-option label="否" :value="parseInt(1)"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="配送日期" prop="sendTime">
							<el-date-picker
								v-model="sendTime"
								type="daterange"
								class="time220"
								:editable="false"
								unlink-panels
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								:picker-options="dateOption"
							/>
						</el-form-item>

						<el-form-item class="btn_box" label="">
							<el-button class="reset" type="primary" @click="reset"
								>重置</el-button
							>
							<el-button
								type="primary"
								@click="getArticleList"
								:loading="listLoading"
								>搜索</el-button
							>
						</el-form-item>
					</el-form>
				</div>

				<div class="main_table marginTop10" style="min-height: 550px">
					<el-table
						ref="multipleTable"
						v-loading="listLoading"
						:data="list"
						element-loading-text="加载中"
						fit
						border
						highlight-current-row
						:header-cell-class-name="this.$verticaline"
						@selection-change="handleSelectionChange"
					>
						<el-table-column type="selection" :selectable="selectInit" />
						<el-table-column
							label="订单号"
							:show-overflow-tooltip="true"
							prop="order_sn"
						/>
						<el-table-column
							label="用户名称"
							:show-overflow-tooltip="true"
							prop="nickname"
						/>

						<el-table-column
							label="下单日期"
							:show-overflow-tooltip="true"
							prop=""
						>
							<template slot-scope="scope">
								{{ parseTime(scope.row.created_at, "{y}-{m}-{d}") }}
							</template>
						</el-table-column>
						<el-table-column
							label="配送日期"
							:show-overflow-tooltip="true"
							prop=""
						>
							<template slot-scope="scope">
								{{
									scope.row.send_time
										? parseTime(scope.row.send_time, "{y}-{m}-{d}")
										: ""
								}}
							</template>
						</el-table-column>
						<el-table-column
							label="下单金额"
							prop="order_money"
							:show-overflow-tooltip="true"
						>
						</el-table-column>
						<el-table-column
							label="配送金额"
							prop="send_money"
							:show-overflow-tooltip="true"
						></el-table-column>
						<el-table-column label="是否同步" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<span
									:style="{
										color: scope.row.synchro == 0 ? '#f56c6c' : '#03a98e',
									}"
								>
									{{ scope.row.synchro == 0 ? "未同步" : "已同步" }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							label="管理操作"
							align="left"
							fixed="right"
							width="120"
							class-name="main_hei"
						>
							<template slot-scope="scope">
								<el-link
									v-if="scope.row.synchro == 0"
									:type="scope.row.synchro == 0 ? 'warning' : 'info'"
									@click="handleSynchron(scope.row)"
									>同步</el-link
								>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="main_page boxdq">
					<div></div>
					<!-- 分页 -->
					<div class="main_page_r">
						<el-pagination
							:current-page="current.page"
							:page-sizes="[20, 50, 100, 200]"
							:page-size="limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalCount"
							background
							@size-change="changeLimit"
							@current-change="changePage"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import dateOption from "@/options/dateOption";
	import { tplus_getOrder, tplus_synchroOrder } from "@/api/tplus/index";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { parseTime } from "@/utils/index";

	export default {
		computed: {},
		data() {
			return {
				dateOption,

				// 时间
				parseTime,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				// 更多
				moredata: false,
				// 列表数据
				list: [],

				listLoading: false,
				// 搜索
				form: {
					is_synchro: 0, //状态
					start_time: "",
					end_time: "",
				},
				sendTime: [],
				createTime: [],
				check_createTime: [],
				selectArr: [],
			};
		},
		mounted() {},
		created() {
			// 列表
			this.tplus_getOrder();
		},
		methods: {
			// 搜索
			getArticleList() {
				this.current.page = 1;
				this.tplus_getOrder();
			},
			// 重置
			reset() {
				this.$refs["userListFrom"].resetFields();
				this.sendTime = [];
				this.createTime = [];
				this.check_createTime = [];
				this.tplus_getOrder();
			},

			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.tplus_getOrder();
			},
			changePage(page) {
				this.current.page = page;
				this.tplus_getOrder();
			},
			// 监听绑定全选不可勾选
			selectInit(row, index) {
				if (row.synchro == 0) {
					return true;
				} else {
					return false;
				}
			},
			// 监听全选
			handleSelectionChange(val) {
				this.selectArr = [];
				val.map((item) => {
					this.selectArr.push(item.id);
				});
			},
			// 批量同步
			handleSynchronAll() {
				if (this.selectArr.length == 0) {
					this.$message.warning("请勾选需要同步的信息");
					return;
				}
				let ids = JSON.stringify(this.selectArr);
				this.tplus_synchroOrder(ids);
			},
			// 单条同步
			handleSynchron(scope) {
				let id = [scope.id];
				if (scope.synchro == 1) {
					this.$message.warning("本条数据已经同步");
					return;
				}
				this.$confirm("此操作将本条数据同步到用友，是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						this.tplus_synchroOrder(JSON.stringify(id));
					})
					.catch(() => {});
			},
			tplus_synchroOrder(ids) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, this.current)) +
								apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ ids: ids }
				);
				tplus_synchroOrder(data).then((res) => {
					if (res.errcode == 0) {
						this.tplus_getOrder();
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// 列表
			tplus_getOrder() {
				this.listLoading = true;
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, this.current)) +
								apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.list_form(),
					this.current
				);
				tplus_getOrder(data).then((res) => {
					if (res.errcode == 0) {
						this.list = res.data.list.data;
						this.totalCount = res.data.list.total;
						this.listLoading = false;
					} else {
						this.$message.errcode(res.msg);
					}
				});
			},
			list_form() {
				let form = JSON.parse(JSON.stringify(this.form));
				form.start_time = this.sendTime ? this.sendTime[0] : "";
				form.end_time = this.sendTime ? this.sendTime[1] : "";
				return form;
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
	.mainor_form form {
		width: calc(100% - 120px);
	}
	.main_num {
		.mainsu_te {
			position: relative;
			top: -1px;
		}
	}
}

// 订单状态
.order0 {
	color: #f56c6c;
}
.order1 {
	color: #118ab2;
}
.order2 {
	color: #aacd6e;
}
.order3 {
	color: #073b4c;
}
.order4 {
	color: #cccccc;
}
// 支付状态
.pay_type0 {
	color: #f56c6c;
}
.pay_type1 {
	color: #03a98e;
}
.btn_box {
	padding-left: 35px;
}
</style>
